<template>
  <div style="background: #fff;height: 100%">
    <div class="login-box">
      <h1>mino洗车后台管理系统</h1>
      <div class="login-form">
        <div class="login-form__line">
          <el-input v-model="username" autofocus placeholder="0100747134057617">
            <i slot="prefix" class="el-input__icon iconfont icon-user"></i>
          </el-input>
        </div>
        <div class="login-form__line">
          <el-input v-model="password" type="password" placeholder="9GCG4R">
            <i slot="prefix" class="el-input__icon iconfont icon-locker"></i>
          </el-input>
        </div>
        <div class="login-form__line">
          <el-button class="login-button" type="primary" @click="fetchData" :loading="loading">登录</el-button>
        </div>
      </div>
      <div @click="autoInput" style="cursor:pointer;margin: 20px auto;">点击此处自动输入账号密码</div>
    </div>
  </div>
</template>
<script>
import http from '@/utils/http'
import api from '@/utils/api'

export default {
  components: {},
  name: 'Login',
  data () {
    return {
      username: '',
      password: '',
      loading: false
    }
  },
  mounted: function () {
  },
  methods: {
    fetchData: async function () {
      let params = {}
      params.username = this.username
      params.password = this.password
      const res = await http.post(api.login, params)
      if (res.data.code === 1) {
        document.cookie = 'token=' + res.data.data.token
        this.$router.push({path: '/shouye'})
      } else {
        this.loading = false
        this.$message({message: res.msg, type: 'error'})
      }
    },
    autoInput () {
      this.username = '123456@qq.com'
      this.password = 'admin'
    }
  }
}
</script>

<style scoped lang="scss" type="text/scss">
  .login-box {
    position: fixed;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    h1 {
      text-align: center;
      color: #666666;
    }
  }
  .login-form {
    width: 250px;
    margin: 0 auto;
    border: 1px solid #d2d2d2;
    padding: 20px 25px;
    border-radius: 10px;
    background-color: #f2f2f2;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, .15);
  }
  .login-form__line {
    margin: 15px 0;
  }
  .login-button {
    width: 100%;
  }
</style>
